<template>
  <div class="app-container">
    <div class="totalBox clearfix">
      <div class="totalItem">
        <img src="../../assets/images/room01.png" alt="" class="roomImg">
        <div class="roomName">商品入库总量</div>
        <div class="roomNums"> {{ putInCount }}</div>
      </div>
      <div class="totalItem">
        <img src="../../assets/images/room02.png" alt="" class="roomImg">
        <div class="roomName">商品出库总量</div>
        <div class="roomNums"> {{ putOutCount }}</div>
      </div>
      <div class="totalItem">
        <img src="../../assets/images/room03.png" alt="" class="roomImg">
        <div class="roomName">商品现存总量</div>
        <div class="roomNums"> {{ existCount }}</div>
      </div>
      <div class="totalItem">
        <img src="../../assets/images/room04.png" alt="" class="roomImg">
        <div class="roomName">库房数</div>
        <div class="roomNums"> {{ roomCount }}</div>
      </div>
    </div>
    <div class="totalBox clearfix">
      <div class="totalItem">
        <img src="../../assets/images/enterPrice.png" alt="" class="roomImg">
        <div class="roomName">商品入库总价</div>
        <div class="roomNums">{{ enterTotal }}</div>
      </div>
      <div class="totalItem">
        <img src="../../assets/images/leavePrice.png" alt="" class="roomImg">
        <div class="roomName">商品出库总价</div>
        <div class="roomNums">{{ leaveTotal }}</div>
      </div>
      <div class="totalItem">
        <img src="../../assets/images/room06.png" alt="" class="roomImg">
        <div class="roomName">入库扫码枪总数</div>
        <div class="roomNums"> {{ inRoomGunCount }}</div>
      </div>
      <div class="totalItem">
        <img src="../../assets/images/room05.png" alt="" class="roomImg">
        <div class="roomName">出库扫码枪总数</div>
        <div class="roomNums"> {{ outRoomGunCount }}</div>
      </div>

    </div>

    <div class="RoomBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="forTitle">最新入库信息</span>
        </div>
        <div class="text item">
          <div class="textLeft">
            商品标识
          </div>
          <div class="textCony">
            {{ inRoomData.code }}
          </div>

        </div>
        <div class="text item">
          <div class="textLeft">
            商品名称
          </div>
          <div class="textCony">
            {{ inRoomData.title }}
          </div>

        </div>
        <div class="text item">
          <div class="textLeft">
            库房名
          </div>
          <div class="textCony">
            {{ inRoomData.room }}
          </div>
        </div>
        <div class="text item">
          <div class="textLeft">
            扫码枪
          </div>
          <div class="textCony">
            {{ inRoomData.gun }}
          </div>

        </div>
        <div class="text item">
          <div class="textLeft">
            入库价
          </div>
          <div class="textCony">
            {{ inRoomData.enterMoney }}
          </div>
        </div>
        <div class="text item">
          <div class="textLeft">
            出库价
          </div>
          <div class="textCony">
            {{ inRoomData.leaveMoney }}
          </div>
        </div>
        <div class="text item">
          <div class="textLeft">
            入库时间
          </div>
          <div class="textCony">
            {{ inRoomData.createTime }}
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="forTitle">最新出库信息</span>
        </div>
        <div class="text item">
          <div class="textLeft">
            商品标识
          </div>
          <div class="textCony">
            {{ outRoomData.code }}
          </div>

        </div>
        <div class="text item">
          <div class="textLeft">
            商品名称
          </div>
          <div class="textCony">
            {{ outRoomData.title }}
          </div>

        </div>
        <div class="text item">
          <div class="textLeft">
            库房名
          </div>
          <div class="textCony">
            {{ outRoomData.room }}
          </div>
        </div>
        <div class="text item">
          <div class="textLeft">
            扫码枪
          </div>
          <div class="textCony">
            {{ outRoomData.gun }}
          </div>

        </div>
        <div class="text item">
          <div class="textLeft">
            入库价
          </div>
          <div class="textCony">
            {{ outRoomData.enterMoney }}
          </div>
        </div>
        <div class="text item">
          <div class="textLeft">
            出库价
          </div>
          <div class="textCony">
            {{ outRoomData.leaveMoney }}
          </div>
        </div>
        <div class="text item">
          <div class="textLeft">
            出库时间
          </div>
          <div class="textCony">
            {{ outRoomData.createTime }}
          </div>
        </div>
      </el-card>
      <div style="clear: both" />
    </div>
  </div>
</template>

<script>
import { download, get, post } from '../../utils/request'
export default {
  name: 'MarkManage',
  components: {

  },
  data() {
    return {
      inRoomData: {}, // 入库信息
      outRoomData: {}, // 出库信息
      putInCount: 0, // 总入库量
      putOutCount: 0, // 总出库量
      existCount: 0, // 现存量
      roomCount: 0, // 库房数
      inRoomGunCount: 0, // 入库扫码枪数
      outRoomGunCount: 0, // 出库扫码枪数
      isScanner: false,
      forUpNums: 0,
      enterTotal: 0,
      leaveTotal: 0
    }
  },
  watch: {
    forUpNums(old, newVal) {
      console.log('woshi是' + newVal)
    }
  },
  created() {

  },
  mounted() {
    this.fetchInroomData()
    this.fetchOutroomData()
    this.fetchPutInData()
    this.fetchPutOutData()
    this.fetchExistData()
    this.fetchRoomData()
    this.fetchInRoomGunData()
    this.fetchOutRoomGunData()
    this.fetchPriceData()
  },
  methods: {

    // 入库信息
    fetchInroomData() {
      get(
        '/api/newestEnter.json',
      ).then(res => {
        console.log(res)
        if (res) {
          this.inRoomData = res
        }
      })
    },
    // 出库信息
    fetchOutroomData() {
      get(
        '/api/newestLeavel.json',
      ).then(res => {
        console.log(res)
        if (res) {
          this.outRoomData = res
        }
      })
    },
    // 总入库量
    fetchPutInData() {
      get(
        '/api/totalEnter.json',
      ).then(res => {
        if (res) {
          this.putInCount = res
        }
      })
    },
    // 总出库量
    fetchPutOutData() {
      get(
        '/api/totalLeavel.json',
      ).then(res => {
        if (res) {
          this.putOutCount = res
        }
      })
    },
    // 现存量
    fetchExistData() {
      get(
        '/api/totalStock.json',
      ).then(res => {
        if (res) {
          this.existCount = res
        }
      })
    },
    // 库房数
    fetchRoomData() {
      get(
        '/api/totalRoom.json',
      ).then(res => {
        if (res) {
          this.roomCount = res
        }
      })
    },
    // 入库扫码枪数
    fetchInRoomGunData() {
      get(
        '/api/totalEnterGun.json',
      ).then(res => {
        if (res) {
          this.inRoomGunCount = res
        }
      })
    },
    // 出库扫码枪数
    fetchOutRoomGunData() {
      get(
        '/api/totalLeavelCount.json',
      ).then(res => {
        if (res) {
          this.outRoomGunCount = res
        }
      })
    },
    // 商品出入库价格
    fetchPriceData() {
      get(
        '/api/codeMoney.json',
      ).then(res => {
        console.log(res)
        if (res) {
          this.enterTotal = res.enterTotal
          this.leaveTotal = res.leaveTotal
        }
      })
    }
  }
}
</script>
<style scoped>
    .forTitle{
        font-size: 20px;
    }
    .text {
        font-size: 18px;
    }
    .text:nth-child(odd){
        background: #ededed;
    }
    .text:nth-child(even){
        background: #f8f8f8;
    }

    .item {
        height: 50px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 5px 0;
    }
    /deep/.el-card__body {
        padding: 0 0 30px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
     .RoomBox{
         width: 100%;
         margin-top: 35px;
     }
    .box-card {
        width: 46%;
        float: left;
        margin-left: 2%;
        border-radius: 10px;
    }
    .textLeft{
        width: 35%;
        height: 100%;
        line-height: 40px;
        float: left;
        text-align: left;
        padding-left: 20px;
    }
    .textCony{
        width: 60%;
        height: 100%;
        line-height: 40px;
        float: left;
        text-align: left;
    }

    .totalBox{
        width: 100%;
        height: auto;
        margin: 35px 0 0 2%;
    }
    .totalItem{
        width: 22%;
        height: 160px;
        border: 1px solid #eee;
        border-radius: 10px;
        float: left;
        margin-right: 2%;
        box-shadow: 0 0 5px #dfdfdf;
        position: relative;
    }
    .roomImg{
        width: 27%;
        position: absolute;
        left: 10%;
        top: 18%;
    }
    .roomName{
        width: 55%;
        position: absolute;
        right: 1%;
        top: 22%;
        text-align: left;
        line-height: 40px;
        font-size: 20px;
        color: #000;
    }
    .roomNums{
        width: 55%;
        position: absolute;
        right: 1%;
        bottom: 22%;
        text-align: left;
        line-height: 40px;
        font-size: 36px;
        color: #000;
        font-weight: 700;
    }

    /deep/ .el-message .el-message--error {
        z-index: 2999 !important;
    }

    /deep/ .el-dialog {
        position: relative;
        margin: 0 auto 56px;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 65%;
    }

    /deep/ .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
        border: 1px solid #DCDFE6 !important;
        border-color: #DCDFE6 !important;
    }

    /deep/ .el-button--primary:focus, .el-button--primary:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #FFF;
    }

    .app-container {
        background: #fff;
        padding: 5px;
        width: 100%;
        margin: auto;
    }

    .filter-container {
        text-align: left;
        margin-bottom: 20px;
    }

    .btnItem {
        background: rgba(0, 0, 0, 0);
        border: none;
    }

    label {
        display: inline-block;
        margin-bottom: 2px;
    }

    @media only screen and (max-width: 1680px) {
        .itemBtn {
            display: block;
            margin: 2px auto;
        }
    }

    /deep/ .el-form-item {
        margin-bottom: 22px;
    }

    /deep/ .el-table {
        width: 100%;
    }

    /deep/ .pagination-container {
        background: #fff;
        padding: 32px 16px;
        width: 96%;
    }

    /deep/ .el-checkbox__label {
        display: inline-block;
        padding-right: 10px;
        line-height: 19px;
        font-size: 16px;
        float: left;
    }

</style>

